<template>
  <q-page>    
    <q-inner-loading visible v-if="model.id == 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>
    <my-event-toolbar v-model="model" />
    <div class="row gutter-sm" :style="$q.platform.is.desktop?'padding:8px;':''">
      <!-- base content -->
      <div class="col-xs-12 col-md-6">
        <my-event-info v-model="model" v-if="model.id>0" />
      </div>

      <!-- user list -->
      <div class="col-xs-12 col-md-6">
        <q-list separator dense class="q-py-none" :no-border="$q.platform.is.mobile" 
                  v-if="list.length>0&&model.id>0" >
          <q-list-header class="row">
            <div class="col">
              报名用户: <b class="text-primary">{{model.userCount}}</b>人
              <br />
              <span>粉丝总数: <b>{{totalFollowers}}</b>人</span>
            </div>
            <div class="col-auto">
              <q-btn class="q-mx-sm" dense label="上传报名表" color="primary"  @click="uploadSign($event)">
                <input type="file" style="display:none;"/> 
              </q-btn>
              <q-btn dense label="下载详情表" outline 
                  v-if="model.hasExcel" @click="downloadAdvanceSign" />
            </div>
          </q-list-header>
          <template v-if="model.hasExcel">
            <q-item style="padding:0;">
              <q-search icon="mdi-account-search" class="full-width no-shadow" :value="filter" 
                  inverted-light color="grey-2"
                placeholder="通过昵称搜索" autofocus="true"
                @input="filterUser" @clear="filterUser('')" clearable/>
            </q-item>
            <q-item v-for="item in filteredList" :key="'user_'+item.id" >
              <!-- <q-item-side :avatar="item.avatar" /> -->
              <q-item-main label>
                <a :href="'https://www.douban.com/people/'+item.id+'/'" target="_blank">{{item.name}}</a>
              </q-item-main>
              <q-item-side right>{{item.followers}}个粉丝</q-item-side>
            </q-item>
          </template>
          <q-item v-if="!model.hasExcel">
            <q-item-main>还未上传报名名单</q-item-main>
          </q-item>
        </q-list>
      </div>
    </div>
  </q-page>
</template>

<script>
import MyEventToolbar from "../components/MyEventToolbar.vue";
import MyEventInfo from "../components/MyEventInfo.vue";

export default {
  name: 'PageEventSign',
  components: { MyEventToolbar, MyEventInfo },
  data () {
    return {
      loading: false,
      hasMore: true,
      next: 0,
      filter: '',
      model:{
        step: 0,
        name: '',
        id: 0,
        days: 0,
        date: '',
        time: '',
        place: '',
        city: '',
        movieId: 0,
        movieName: '',
        userCount: 0,
        hasExcel: false,
        ratingCount: 0,
        stars: [0,0,0,0,0],
        starsRate: [0,0,0,0,0],
        score: ''
      },
      list:[]
    }
  },
  mounted() {    
    let me = this;
    this.loadEventSign();
    this.loadMoreUsers();
    this.$api.ui.pageBackBtn = function(){
      me.$router.push('/event');
    }
  },
  computed: {
    totalFollowers() {
      if(this.list.length == 0) {
        return 0;
      }
      let total = 0
      for(let i = 0; i < this.list.length; i++) {
        total += this.list[i].followers;
      }
      return total;
    },
    filteredList() {
      let query = this.filter.toLowerCase();
      return this.list.filter(function (user) {
        if(query.length>0) {
          let text = user.name.toLowerCase();
          if(text.indexOf(query)>=0) {
            return true;
          }       
          return false;
        }
        return true;
      })
    }
  },
  methods: {
    initCheckBeforeMinutes() {
      let me = this;
      this.$q.dialog({
        title: '签到时间确认',
        message: '开场前多少分钟开始签到？',
        prompt: {
          model: '70',
          type: 'number' // 可选的
        },
        cancel: true,
        color: 'secondary'
      }).then(data => {
        me.model.checkBeforeMinutes = data;
        me.$api.party.updateCheckTime(me.model.id, data);
      }).catch(() => {
        
      })
    },
    filterUser(val) {
      this.filter = val;
    },
    loadMoreUsers() {
      let me = this;
      let eventId = me.$route.params.id;
      me.loading = true;
      this.$api.party.loadEventUsers(eventId, me.next, res=>{
        let data = res.data;
        if(data.model.length == 0) {
          me.hasMore = false;
        } else {
          me.next = data.next;
          data.model.forEach(item=>{
            me.list.push(item);
          });
        }
        me.loading = false;
      });
    },

    loadEventSign() {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.party.loadEvent(eventId, res=>{
        me.model = res.data.model;
        if(me.model.checkBeforeMinutes == 65) {
          me.initCheckBeforeMinutes();
        }
        me.$api.ui.pageTitle = me.model.city + '：《' + me.model.movieName + '》';
      });
    },

    uploadSign(e) {
      let me = this;
      let inputNode = e.target.parentElement.getElementsByTagName("input")[0];
      inputNode.onchange = function(){
        let file = inputNode.files[0];
        me.$api.party.uploadExcelSign(me.model.id, file, res=>{
          if(res.data.ret == 200) {
            me.model.hasExcel = true;
            me.$q.notify({
              message: '文件上传成功',
              type: 'positive',
              color: 'positive',
              icon: 'mdi-check'
            });
            me.downloadAdvanceSign();
          }
        })
      };
      inputNode.click();
    },

    downloadAdvanceSign() {
      let filename = this._generateFileName('报名用户详情');
      this.$api.party.downloadExcelAdvanceSign(this.model.id, filename);
    },

    _generateFileName(type) {
      var model = this.model;
      return model.date.replace('-', '').replace('-','') + '_' 
                        + model.city + '_' 
                        + model.movieName + '_'
                        + type + '.xls';
    }
  }
}
</script>
